<template>
  <uni-nav-bar title="添加PC端账户" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.KeyCustom.name}}</view>
  <view class="package">
    <view class="space-between" style="padding-bottom: 20rpx;box-sizing: border-box;">
      <view>账号</view>
      <input class="uni-input" placeholder="请输入账号" v-model="username" />
    </view>
    <view class="space-between top">
      <view>密码</view>
      <input class="uni-input" placeholder="请输入密码" v-model="password" />
    </view>
  </view>
  <view class="add" @click="submit()">确定</view>
</template>
<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref } from 'vue';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
    * 添加PC端账户
    * @param {String} username  账号
    * @param {String} password  密码
    * @return
    */
  const username = ref('')
  const password = ref('')
  function submit() {
    if (!username.value) {
      errorToast('请输入账号')
      return
    }
    if (!password.value) {
      errorToast('请输入密码')
      return
    }
    showLoading()
    const payload = {
      customers_id: Number(TeamInfo.KeyCustom.id),
      username: username.value,
      password: password.value,
    };
    toPublish(
      'control/addAccountByPc',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>
<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 60rpx auto 20rpx;
    font-size: 32rpx;
  }

  input {
    text-align: right;
  }

  .top {
    margin-top: 10rpx;
    border-top: 1px solid #eee;
    padding-top: 20rpx;
    box-sizing: border-box;
  }
</style>